<script>
import { newOptions, newsList } from '@/api/constant'
export default {
  name: 'NewsPage',
  data () {
    return {
      showOption: false,
      newOptions,
      activeValue: null,
      activePage: 1,
      maxPage: 5,
      newsList
    }
  },
  computed: {
    activeLabel () {
      return newOptions.find((el) => el.value === this.activeValue).label
    }
  },
  methods: {
    selectedValue (value) {
      this.activeValue = value
      this.showOption = false
    },
    changePage (page) {
      if (page === this.activePage || page < 1 || page > this.maxPage) return
      this.activePage = page
    }
  }
}
</script>

<template>
  <div class="new-page">
    <div class="banner"></div>
    <div class="w">
      <div class="header">
        <div class="title">新闻动态</div>
        <div class="filter">
          <div class="all" @click="activeValue=null">全部</div>
          <div class="year">
            <div class="select">
              <div class="text" @click="showOption = !showOption">
                {{ activeLabel }}
              </div>
              <ul class="options" v-show="showOption">
                <li
                  v-for="{ label, value } in newOptions"
                  :key="label"
                  :class="{ active: activeValue === value }"
                  @click="() => selectedValue(value)"
                >
                  <!--  -->
                  {{ label }}
                </li>
              </ul>
            </div>
            <div class="icon-btn" @click="showOption = !showOption">
              <i class="icon">
                <img
                  v-show="!showOption"
                  :src="$url + '/icon/bottom.png'"
                  alt=""
                />
                <img v-show="showOption" :src="$url + '/icon/top.png'" alt="" />
              </i>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
        <!-- 6个 -->
        <div
          class="item"
          v-for="(item, i) in newsList"
          :key="i"
          @mouseenter="item.in = true"
          @mouseleave="item.in = false"
        >
          <div class="pic"></div>
          <div class="content">
            <div class="header">
              <div class="date">
                <div class="day">{{ item.day }}</div>
                <div class="year">{{ item.year }}</div>
              </div>
              <div class="icon" @click="$router.push('/news/' + i)">
                <img
                  v-show="!item.in"
                  :src="$url + '/icon/right-white.png'"
                  alt=""
                />
                <img
                  v-show="item.in"
                  :src="$url + '/icon/right-primary.png'"
                  alt=""
                />
              </div>
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="text">{{ item.text }}</div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <div
          class="pre"
          :class="{ disabled: activePage === 1 }"
          @click="() => changePage(activePage - 1)"
        >
          上一页
        </div>
        <ul class="pages">
          <li
            class="page"
            v-for="item in maxPage"
            :key="item"
            :class="{ active: activePage === item }"
            @click="() => changePage(item)"
          >
            {{ item }}
          </li>
        </ul>
        <div
          class="next"
          :class="{ disabled: activePage === maxPage }"
          @click="() => changePage(activePage + 1)"
        >
          下一页
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.new-page {
  .banner {
    height: 445px;
    background: url(http://www.yuhuachina.com/upload/img/202112/211206153942bfcfb7.jpg)
      left top / 100% 100% no-repeat;
  }
  .w {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    > .header {
      margin: 55px 0;
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 2px solid #414099;
      .title {
        line-height: 32px;
        font-size: 24px;
        padding-top: 10px;
        font-weight: bold;
      }
      .filter {
        width: 310px;
        display: flex;
        .all {
          font-size: 17px;
          color: #fff;
          text-align: center;
          background: #414099;
          width: 95px;
          height: 52px;
          line-height: 52px;
          border-radius: 5px;
          margin-right: 14px;
        }
        .year {
          flex: 1;
          display: flex;
          line-height: 52px;
          color: #fff;
          .select {
            flex: 1;
            border: 0 none;
            border-radius: 5px 0 0 5px;
            background-color: #414099;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none; /*去掉下拉箭头*/
            text-align: center;
            position: relative;
            .options {
              position: absolute;
              left: 0;
              top: 52px;
              line-height: 40px;
              text-align: center;
              width: 100%;
              background-color: #414099;
              li:hover,
              li.active {
                background-color: #6f6edf;
              }
            }
          }
          .icon-btn {
            width: 52px;
            text-align: center;
            background-color: #6f6edf;
            border-radius: 0 5px 5px 0;
            color: #fff;
            .icon {
              width: 100%;
              height: 100%;
              font-size: 22px;
            }
          }
        }
      }
    }

    .list {
      .item {
        padding: 32px 30px;
        display: flex;
        border-radius: 5px;
        background-color: #fff;
        margin-bottom: 35px;
        &:hover {
          background-color: #414099;
          color: #fff;
          cursor: pointer;
          .content {
            .header {
              .icon {
                background-color: #fff;
              }
            }
            .text {
              color: #fff;
            }
          }
        }
        .pic {
          width: 334px;
          height: 196px;
          background: url(http://www.yuhuachina.com/upload/img/202303/23032109224634d165.png)
            left top / 100% no-repeat;
        }

        .content {
          margin: 10px 0 0 36px;
          flex: 1;
          .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .date {
              display: flex;
              align-items: flex-end;
              line-height: 1;
              padding-bottom: 5px;
              .day {
                font-size: 30px;
                font-weight: bold;
                margin-right: 20px;
              }
              .year {
                font-size: 16px;
                color: #999;
              }
            }
            .icon {
              width: 40px;
              height: 40px;
              background-color: #414099;
              border-radius: 50%;
              font-size: 24px;
            }
          }

          .title {
            margin: 24px 0;
            line-height: 24px;
            font-size: 18px;
          }
          .text {
            font-size: 15px;
            color: #999;
          }
        }
      }
    }

    .pagination {
      margin: 60px 0;
      display: flex;
      justify-content: center;
      text-align: center;
      line-height: 46px;
      .pre,
      .next {
        width: 110px;
        height: 46px;
        border-radius: 23px;
        &.disabled {
          color: #bfbfbf;
          background: #f2f2f2;
          &:hover {
            cursor: not-allowed;
            color: #bfbfbf;
            background: #f2f2f2;
          }
        }
      }
      .pages {
        margin: 0 12px;
        display: flex;
        li {
          width: 46px;
          border-radius: 50%;
          margin-right: 12px;
          &.active {
            background-color: #414099;
            color: #fff;
          }
          &:last-of-type {
            margin: 0;
          }
        }
      }

      .pre,
      .next,
      .pages li {
        background-color: #fff;
        &:hover {
          background-color: #414099;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
